<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp1800 template" content="My 1800 App">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap Library CSS CDN go here -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.js"
        crossorigin="anonymous"></script>

    <!-- Other libraries go here -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    
    <!-- Link to styles of your own -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->
    <!-- Custom CSS to add blue border to nav links -->
    <style>
        .navbar-nav .nav-link {
            border: 2px solid rgb(36, 191, 173); /* 添加 1 像素宽的蓝色实线边框 */
            border-radius: 4px; /* 可选：添加圆角边框 */
            margin: 0 5px; /* 可选：添加左右外边距 */
        }
    </style>
</head>

<body>
    <!-- Is the Nar bar settings -->
    <div class="container-fluid  bg-info">
      <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
       
        <div class="col-md-3 mb-2 mb-md-0">
          <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
             <img src="images/Whale.jfif" alt="" width="50" height="50" class="d-inline-block align-text-top">
          </a>
        </div>
        <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
          <li><a href="#" class="nav-link px-2 text-dark">Map</a></li>
          <li><a href="#" class="nav-link px-2 text-dark">Donate</a></li>
          <li><a href="#" class="nav-link px-2 text-dark">Home</a></li>
          <li><a href="#" class="nav-link px-2 text-dark">Call</a></li>
          <li><a href="#" class="nav-link px-2 text-dark">Me</a></li>
        </ul>
  
        <div class="col-md-3 text-end">
          <button type="button" class="btn btn-outline-primary me-2">Login</button>
          <button type="button" class="btn btn-primary">Sign-up</button>
        </div>
      </header>
    </div>

        <!-- Is the Home of the page -->
          <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Early warning</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Avoid</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Earthquake konwledge</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">More</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Dropdown link
                    </a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Action</a></li>
                      <li><a class="dropdown-item" href="#">settings</a></li>
                      <li><a class="dropdown-item" href="#">Feedback</a></li>
                    </a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Action</a></li>
                      <li><a class="dropdown-item" href="#">Another action</a></li>
                      <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
            <!-- Search栏 -->
            <nav class="navbar bg-body-tertiary">
                <div class="container-fluid">
                  <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                  </form>
                </div>
              </nav>
               <!-- Search栏 -->
          </nav>
         
          <!-- 内容1 -->
          <div class="container my-5">
            <h1>Date:1960Years</h1>
            <h1>Place:Chile ———— Degree:9.5(Most)</h1>
            <div class="p-5 text-center bg-body-tertiary rounded-3">
                <img src="images/EQ1.jpg" alt="" width="800" height="500">
                <h1 class="text-body-emphasis"></h1>
              <p class="col-lg-8 mx-auto fs-5 text-muted">
                The 1960 Chile earthquake, the most powerful ever recorded, reminds us of nature's overwhelming strength and unpredictability. It underscores the importance of disaster preparedness, early warning systems, and resilient infrastructure to mitigate the devastating impacts of such cataclysmic events.
              </p>
              <div class="d-inline-flex gap-2 mb-5">
              </div>
            </div>
          </div>
           <!-- 内容2 -->
           <div class="container my-5">
            <h1>Date:May.12.2008</h1>
            <h1>Place:Wenchuan ———— Degree:4.8</h1>
            <div class="p-5 text-center bg-body-tertiary rounded-3">
                <img src="images/wenchaun.jfif" alt="" width="800" height="500">
                <h1 class="text-body-emphasis"></h1>
              <p class="col-lg-8 mx-auto fs-5 text-muted">
                The Wenchuan earthquake in 2008 showed the immense destructive power of natural disasters, leaving countless lives lost and homes in ruins. Yet it also illuminated the unwavering spirit of humanity, as unity, resilience, and global support emerged, proving that together we can rise from the ashes and rebuild a brighter future.
              </p>
              <div class="d-inline-flex gap-2 mb-5">
              </div>
            </div>
          </div>
           <!-- 内容3 -->
           <div class="container my-5">
            <h1>Date:2024</h1>
            <h1>Place:Indian ocean ———— Degree:9.3</h1>
            <div class="p-5 text-center bg-body-tertiary rounded-3">
                <img src="images/EQ3.jpg" alt="" width="800" height="500">
                <h1 class="text-body-emphasis"></h1>
              <p class="col-lg-8 mx-auto fs-5 text-muted">
                The 2004 Indian Ocean's 9.3 - magnitude earthquake and subsequent tsunami revealed nature's raw power. It highlighted the need for global early - warning systems, international cooperation, and environmental protection to build resilience against such disasters.
              </p>
              <div class="d-inline-flex gap-2 mb-5">
              </div>
            </div>
          </div>
</body>
</html>